<template>
	<view>
		<view class="withdraw_tabs">
			<u-tabs v-model="activeTab" :scroll="false" :tabs="tabs" @change="tabChange" :lineScale="2">
			</u-tabs>
		</view>
		<u-empty-state v-if="records.length == 0" value="暂无相关随访信息"></u-empty-state>
		<scroll-view v-else show-scrollbar="false" scroll-y style="height: calc(100vh - 150rpx);">
			<view v-for="(item) in records" class="list-item" :key="item.id">
				<view class="row_1">
					<view>{{ item.tempName }}</view>
					<view :style="item.writeStatus == 0 ? 'color:#FC4E4C' : 'color:#24E104'">{{ item.writeStatus == 0 ?
							'未完成' : '已完成'
					}}</view>
				</view>
				<view class="row_2">
					<view>
						<view>{{ item.createdTime }}</view>
						<view>{{ item.num }}/{{ item.totalNum }}期次</view>
					</view>
					<view><button v-if="item.writeStatus == 0"
							@click="gotoRouter('/pages-member/followDetail/followDetail?id=' + item.id)">去填写</button>
						<button v-if="item.writeStatus == 1"
							style="background-color: #FFFFFF;color:#B0B2B1 ; border-color: #B0B2B1;"
							@click="gotoRouter('/pages-member/followDetail/followDetail?id=' + item.id)">查看</button>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			// busType: '',
			tabs: ['全部', '未完成', '已完成'],
			status: ['', '0', '1'],  //tabs参数集合
			records: [],
			activeTab: 0,
			pageNo: 1,
			total: 0,
		}
	},
	onShow() {
		this.records = []
		this.pageNo = 1
		this.getUserFollowList()
	},
	onReachBottom() {
		if (this.pageNo * 10 < this.total) {
			this.pageNo++
			this.getUserFollowList()
		}
	},
	methods: {
		tabChange(e) {  //选项切换
			this.activeTab = e
			// 重置页码和内容
			this.records = []
			this.pageNo = 1
			this.getUserFollowList()
		},
		// 随访列表
		getUserFollowList() {
			const data = {
				pageNo: this.pageNo,
				pageSize: '10',
				writeStatus: this.status[this.activeTab]
			}
			this.$api.getUserFollowList(data).then(e => {
				const { code, result: { records, total } } = e
				if (code == 200) {
					this.total = total
					this.records.push.apply(this.records, records);
				}
			})
		}
	}
}
</script>

<style lang="less">
@import './myFollow.less';
</style>
